<template>
	<div class="container">
		<div class="header">
			<img src="./navi_title_v6.png" alt="">
			<div class="sou">
				<img class="img" src="./navi_search_v5.png" alt="">
				<span>搜一搜</span>
			</div>
		</div>
		<template>
			<img src="" alt="">
			<el-carousel indicator-position="outside" style="height:170px;">
				<el-carousel-item v-for="item in 3" :key="item">
				</el-carousel-item>
			</el-carousel>
		</template>
		<div class="content">
			<ul class="shang">
				<li>
					<img src="./p0kgmu4q3jo_22028918941626688453905.png" alt="">
					<p>上新精选</p>
				</li>
				<li>
					<img src="./jqdqm5q81n8_22028918941626687376754.png" alt="">
					<p>小米众筹</p>
				</li>
				<li>
					<img src="./aphcvmd2gvg_22028918941626688016327.png" alt="">
					<p>有品秒杀</p>
				</li>
				<li>
					<img src="./ea317c7c_ef18_4ee7_91ab_15fa62c72e19.png" alt="">
					<p>生活优选</p>
				</li>
				<li>
					<img src="./79ca50c5_dc92_41da_bf5d_08ea24bb9652.png" alt="">
					<p>小米自营</p>
				</li>
			</ul>
		</div>
		<div class="xiao">
			<div class="mi">
				<div class="you">
					<div class="zhong">
						<div class="hang">
							<span>小米有品众筹</span>
						</div>
						<div class="yu">
							<span>6款众筹中</span>
							<img src="./下载.png" alt="">
						</div>
					</div>
				</div>
				<div class="fu">
					<div class="chu">
						<div class="huo">
							<span>航天气凝绒抗寒服</span>
							<div class="guo">
								<span>￥</span>
								<p>399</p>
								<i>起</i>
							</div>
						</div>
						<div class="ri">
							<span>1.1万</span>
							<p>人支持</p>
							<div class="wan">
								<span>完成度</span>
								<p>425%</p>
							</div>
						</div>
					</div>
					<div class="tu">
						<div class="pian">
							<img src="./64c36c9f_fe23_4068_8334_0817de759298.png" alt="">
						</div>
					</div>
					<div class="shu">
						<div class="heng">
						</div>
					</div>
				</div>
				<div class="li">
					<div class="xiao">
						<div class="fang">
							<img src="./ad39ca73_ca5f_4178_ae18_0efa0c577972.png" alt="">
							<p>消防应急包</p>
							<p>￥ <span>369</span></p>
						</div>
					</div>
					<div class="zhi">
						<div class="neng">
							<img src="./49448878_b16e_48f9_b6d9_424a0a59020a.png" alt="">
							<p>AR智能眼镜</p>
							<p>￥ <span>399</span> <i>起</i></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="qi">
			<div class="shan">
				<div class="da">
					<div class="xin">
						<div class="zhe">
							<div class="xuan">
								<span>上新精选</span>
							</div>
							<div class="ge">
								<span>更多</span>
								<img src="./下载.png" alt="">
							</div>
						</div>
					</div>
					<div class="recommand-wrap">
						<div ref="wrapper">
							<ul class="cont" ref="cont">
								<li class="cont-item" v-for="item of recommendList" :key="item.id">
									<div class="cont-img">
										<img :src="item.url">
									</div>
									<div class="cont-dest">{{ item.text }}</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="footer2">
				<MiNav></MiNav>
			</div>
		</div>
	</div>
</template>

<style scoped>
.footer2 {
	flex-shrink: 0;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f4f4f4;
}

.header {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	width: 414px;
	background-color: rgb(132, 93, 50);
	padding-top: 0px;
	height: 61px;
	align-items: center;
	justify-content: center;
}

.header img {
	width: 39px;
	height: 30px;
	margin-left: 10px;
	margin-top: 10px;
}

.header .sou {
	width: 300px;
	;
	border: 0px solid black;
	position: relative;
	top: 0px;
	left: -10px;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex: 1 1 0%;
	margin-left: 12.144px;
	-webkit-box-flex: 1;
	-webkit-box-align: center;
	align-items: center;
	height: 35.328px;
	background-color: rgb(240, 240, 240);
	border-radius: 17.664px;
}

.header span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex: 1 1 0%;
	font-size: 15.456px;
	height: 22.08px;
	-webkit-box-flex: 1;
	color: rgb(51, 51, 51);
	margin-left: 11.04px;
	opacity: 0.4;
	position: absolute;
	left: 33px;
}

.header .img {
	width: 22px;
	height: 22px;
	position: absolute;
	top: -2px;
}

.misk img {
	width: 100%;
	height: 176px;
}

.content {
	display: flex;
	height: 90px;
	flex-direction: row;
}

.shang li {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
}

.shang {
	width: 500px;
	display: flex;
}

.shang li img {
	display: flex;
	width: 66.24px;
	height: 66.24px;
	opacity: 1;
	border-radius: 0px;
	object-fit: contain;

}

.shang li p {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 13.248px;
	text-align: center;
	color: rgb(0, 0, 0);
	line-height: 18.768px;
}

.xiao {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	height: 186px;
}

.xiao .mi {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	place-content: flex-start center;
	flex-shrink: 0;
	margin-bottom: 11.04px;
	-webkit-box-pack: center;
	background-color: rgb(255, 255, 255);
	width: 387.504px;
	margin-left: 13.248px;
	border-radius: 6.624px;
	overflow: hidden;
	height: 176px;
}

.xiao .mi .you {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	place-content: flex-start;
	flex-shrink: 0;
	cursor: pointer;
	width: 387.504px;
	height: 44.16px;
	-webkit-box-pack: start;
	-webkit-box-align: center;
	align-items: center;
}

.xiao .mi .you .zhong {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	margin-top: 2.208px;
	height: 41.952px;
	width: 387.504px;
}

.xiao .mi .you .zhong .hang {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	width: 277.104px;
}

.hang span {
	white-space: nowrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 19.872px;
	font-weight: 500;
	line-height: 41.952px;
	color: rgb(34, 34, 34);
	margin-left: 8.832px;
	font-family: MILanPro_MEDIUM--GB1-4;
	overflow: hidden;

}

.yu {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	place-content: flex-start flex-end;
	flex-shrink: 0;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: end;
	width: 110.4px;
}

.yu span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 13.248px;
	line-height: 41.952px;
	color: rgba(0, 0, 0, 0.4);
	margin-right: 5.52px;
	text-align: center;
	font-weight: 400;
	font-family: MILanPro--GB1-4;

}

.yu img {
	display: flex;
	width: 4.416px;
	height: 8.832px;
	margin-right: 11.04px;
	position: relative;

}

.fu {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	cursor: pointer;
	width: 178.848px;
	height: 121.44px;
	margin-left: 9.936px;
	border-radius: 6.624px 6.624px 8.832px 8.832px;
	overflow: hidden;
	background-color: rgb(255, 250, 242);
}

.li {
	border: 0px solid black;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	top: 50px;
	left: 184px;
}

.chu {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 178.848px;
	height: 110.4px;
}

.huo {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 178.848px;
	height: 94.944px;
}

.huo span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 14.352px;
	margin-top: 9.936px;
	margin-left: 6.624px;
	width: 71.76px;
	color: rgba(0, 0, 0, 0.8);
	overflow: hidden;
	font-family: MILanPro_MEDIUM--GB1-4;
	font-weight: 500;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

.guo {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	margin-top: 11.04px;
	margin-left: 6.624px;
	height: 22.08px;
}

.guo span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 11.04px;
	color: rgb(208, 141, 53);
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-right: 2.208px;
	margin-top: 1.104px;
}

.guo p {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 15.456px;
	color: rgb(208, 141, 53);
	font-weight: 700;
	font-family: MIUIEX-Bold;
	left: -60px;
}

.guo i {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 11.04px;
	color: rgb(208, 141, 53);
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-left: 1.104px;
	margin-top: 3.312px;
	left: -60px;
}

.ri {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	height: 15.456px;
	width: 178.848px;
}

.ri span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 12.144px;
	color: rgb(255, 27, 27);
	line-height: 15.456px;
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-left: 6.624px;
}

.ri p {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 12.144px;
	color: rgb(102, 102, 102);
	line-height: 15.456px;
	font-weight: 300;
	font-family: MILanPro_NORMAL--GB1-4;
}

.wan {
	border: 0px solid black;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	place-content: flex-start flex-end;
	flex-shrink: 0;
	top: 0px;
	right: 6.624px;
	height: 15.456px;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: end;
}

.wan span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 12.144px;
	color: rgb(102, 102, 102);
	line-height: 15.456px;
	font-weight: 300;
	font-family: MILanPro_NORMAL--GB1-4;
}

.wan p {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 12.144px;
	color: rgb(255, 27, 27);
	line-height: 15.456px;
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-left: 0px;
}

.shu {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	margin-top: 6.624px;
	height: 4.416px;
	overflow: hidden;
	width: 178.848px;
	background-color: rgb(240, 235, 228);
	border-bottom-left-radius: 8.832px;
	border-bottom-right-radius: 8.832px;
}

.heng {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 178.848px;
	height: 4.416px;
	background-image: linear-gradient(to right, rgb(235, 194, 138), rgb(235, 194, 138));
	overflow: hidden;
}

.tu {
	border: 0px solid black;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	top: 0px;
	left: 88.32px;
	width: 83.904px;
	height: 83.904px;
}

.tu .pian {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 83.904px;
	height: 83.904px;
	background-color: transparent;
	border-radius: 0px;
}

.xiao {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	cursor: pointer;
	width: 83.904px;
	height: 121.44px;
	margin-left: 8.832px;

}

.fang {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 82.8px;
	height: 82.8px;
	background-color: transparent;
	border-radius: 0px;

}

.fa img {
	display: flex;
	width: 82.8px;
	height: 82.8px;
	opacity: 1;
	border-radius: 0px;
	object-fit: contain;
}

.fang p {
	white-space: nowrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 13.248px;
	color: rgba(0, 0, 0, 0.8);
	text-overflow: clip;
	overflow: hidden;
	line-height: 17.664px;
	font-weight: 400;
	font-family: MILanPro--GB1-4;
	width: 83.904px;
	text-align: center;
}

.fang p:last-child {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 11.04px;
	color: rgb(208, 141, 53);
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-right: 2.208px;
	margin-top: 1.104px;
}

.fang p span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 15.456px;
	color: rgb(208, 141, 53);
	font-weight: 700;
	font-family: MIUIEX-Bold;
}

.zhi {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	cursor: pointer;
	width: 83.904px;
	height: 121.44px;
	margin-left: 8.832px;
}

.neng {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 82.8px;
	height: 82.8px;
	background-color: transparent;
	border-radius: 0px;
}

.neng p {
	white-space: nowrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 13.248px;
	color: rgba(0, 0, 0, 0.8);
	text-overflow: clip;
	overflow: hidden;
	line-height: 17.664px;
	font-weight: 400;
	font-family: MILanPro--GB1-4;
	width: 83.904px;
	text-align: center;
}

.neng p:last-child {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 11.04px;
	color: rgb(208, 141, 53);
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-right: 2.208px;
	margin-top: 1.104px;
}

.neng p span {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;

	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 15.456px;
	color: rgb(208, 141, 53);
	font-weight: 700;
	font-family: MIUIEX-Bold;
}

.neng p i {
	white-space: pre-wrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;

	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 11.04px;
	color: rgb(208, 141, 53);
	font-weight: 500;
	font-family: MILanPro_MEDIUM--GB1-4;
	margin-left: 1.104px;
	margin-top: 3.312px;
}

el-carousel__item h3 {
	font-size: 18px;
	opacity: 0.75;
	line-height: 170px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-image: url("./tupian1.jpg");
	background-size: 414px 176px;
	background-repeat: no-repeat
}

.el-carousel__item:nth-child(2n+1) {
	background-image: url("./tupian2.jpg");
	background-size: 414px 176px;
	background-repeat: no-repeat
}

.qi {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	top: 69px;
}

.shan {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 387.504px;
	height: 209.76px;
	border-radius: 6.624px;
	overflow: hidden;
	margin-left: 13.248px;
}

.da {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	width: 387.504px;
	height: 196.512px;
	border-radius: 6.624px;
	overflow: hidden;
	background-color: rgb(255, 255, 255);
}

.xin {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	cursor: pointer;
}

.zhe {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	width: 387.504px;
	height: 47.472px;
}

.xuan {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	width: 332.304px;
	height: 27.6px;
	margin-top: 11.04px;
	margin-left: 9.936px;
}

.xuan span {
	white-space: nowrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 19.872px;
	line-height: 27.6px;
	font-weight: bold;
	color: rgb(51, 51, 51);
	overflow: hidden;
}

.ge {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	place-content: flex-start flex-end;
	flex-shrink: 0;
	width: 45.264px;
	height: 49.68px;
	margin-right: 9.936px;
	-webkit-box-pack: end;
	-webkit-box-align: center;
	align-items: center;
}

.ge span {
	white-space: nowrap;
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: block;
	-webkit-box-orient: vertical;
	flex-direction: column;
	align-content: flex-start;
	flex-shrink: 0;
	font-size: 13.248px;
	width: 28.704px;
	line-height: 49.68px;
	color: rgb(153, 153, 153);
	padding-right: 2.208px;
	overflow: hidden;
}

.ge img {
	display: flex;
	width: 4.416px;
	height: 8.832px;
	margin-right: 12.144px;
	object-fit: cover;
}

.recommand-wrap {
	border: 0px solid black;
	position: relative;
	box-sizing: border-box;
	display: flex;
	-webkit-box-orient: horizontal;
	flex-direction: row;
	align-content: flex-start;
	flex-shrink: 0;
	-webkit-box-align: center;
	align-items: center;
	height: 149.04px;
	width: 2136.24px;
}

.cont {
	list-style: none;
	overflow-x: scroll;
	white-space: nowrap;
	font-size: 12px;
	padding-right: .24rem;
}

.cont-item {
	position: relative;
	display: inline-block;
	padding: .06rem 0 .2rem;
	margin: 0 .1rem;
}

.cont-img img {
	display: flex;
	width: 102.672px;
	height: 102.672px;
	opacity: 1;
	border-radius: 2.208px 2.208px 0px 0px;
	object-fit: cover;
}

.cont-dest {
	margin: 1rem 0;
}
</style>

<script>
import MiNav from "../../components/MiNav/MiNav";
export default {
	name: "Home",
	components: { MiNav },
	prop: {
		recommendList: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			imgArr: [
				require("./tupian1.jpg"),
				require("./tupian2.jpg"),
			],
			recommendList: [
				{ id: 1, url: require("./tupian3.png"), text: "Note 12 Pro" },
				{ id: 2, url: require("./tupian4.png"), text: "气凝胶保暖打底衫" },
				{ id: 3, url: require("./tupian5.png"), text: "Colyn岩板餐桌椅" },
				{ id: 4, url: require("./tupian6.png"), text: "恒温电水壶2 Pro" },
				{ id: 5, url: require("./tupian7.png"), text: "磁力声光拼装枪" },
			],
			index: 0,

		}
	},
	methods: {
		verScroll() {
			let width = this.recommendList.length * 110// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
			this.$refs.cont.style.width = width + 'px'  // 修改滚动区域的宽度
			this.$nextTick(() => {
				if (!this.scroll) {
					this.scroll = new BScroll(this.$refs.wrapper, {
						startX: 0,  // 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
						click: true,
						scrollX: true,
						scrollY: false,
						eventPassthrough: 'vertical'
					})
				} else {
					this.scroll.refresh() //如果dom结构发生改变调用该方法
				}
			})
		}
	},
	mounted() {
		this.$nextTick(() => {
			let timer = setTimeout(() => {
				if (timer) {
					clearTimeout(timer)
					this.verScroll()
				}
			}, 0)
		})
	}
}
</script>